<template>
  <div>
    <!--面包屑导航栏-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link to="/home/categories">商品管理</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区-->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="AddClassify">添加分类</el-button>
        </el-col>
      </el-row>
      <!--表格区域-->
      <tree-table :show-row-hover="true" :border="true" index-text="#" :show-index="true" :expand-type="false"
                  :selection-type="false" :data="cateList.result" :columns="columns">
        <!--这里就是通过作用域插槽自定义的表格内容区-->
        <template v-slot:isOK="scope">
          <i v-if="scope.row.cat_delete" style="color:lightgreen" class="el-icon-success"></i>
          <i v-else class="el-icon-error" style="color: red"></i>
        </template>
        <!--排序列区域-->
        <!--在这里说明一下为什么使用v-slot  因为v-slot可以将slot的选择插槽名字和slot-scope获取插槽里数据的功能合并为一步更加的方便-->
        <template v-slot:order="scope">
          <el-tag v-if="scope.row.cat_level===0">一级</el-tag>
          <el-tag v-else-if="scope.row.cat_level===1" type="success">二级</el-tag>
          <el-tag v-else type="warning">三级</el-tag>
        </template>
        <!--操作模板-->
        <template v-slot:opt="scope">
          <el-button size="mine" type="primary" icon="el-icon-edit" @click="onSet(scope.row.cat_id)">编辑</el-button>
          <el-button size="mine" type="danger" icon="el-icon-delete" @click="onDelete">删除</el-button>
        </template>
      </tree-table>
      <!--分页区域-->
      <!--current-page 是指当前的页数要给个动态值-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--添加分类对话框-->
    <el-dialog
        title="提示"
        :visible.sync="showClassify"
        width="30%"
        @close="onDown"
    >
      <!--这里是表单内容区-->
      <el-form :model="AddCateForm" :rules="AddCateFormRules" ref="AddCateForm" label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="AddCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <!--这里后续会添加一个级联选择器 现在先占个位-->
          <!--clearable 是否支持清空选项-->
          <el-cascader
              v-model="selectKeys"
              :options="PrentList"
              :props="{value:'cat_id',label:'cat_name',children:'children',expandTrigger: 'hover',checkStrictly: true}"
              @change="parentCate"
              clearable
          ></el-cascader>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
    <el-button @click="UnSendClassify">取 消</el-button>
    <el-button type="primary" @click="sendClassify">确 定</el-button>
  </span>
    </el-dialog>
    <!--编辑区域对话框-->
    <el-dialog
        title="提示"
        :visible.sync="SetDialogVisible"
        width="30%"
        @close="onSetClose"
    >
      <!--:model表示表单数据对象-->
      <el-form ref="SetForm" :model="SetForm" :rules="SetRules" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="SetForm.cat_name" prop="cateName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="SetDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="SetDown">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Cate",
  data() {
    return {
      //从后台获取的商品分类数据
      cateList: [],
      //发送给后台的参数信息
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      //这个代表从后台获取的总数据
      total: 0,
      //这个代表是树形控件的相关设定规则
      //这里数组里的每一个对象都对应表格中的一列  的对应规则
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
        },
        {
          label: '是否有效',
          //这个就是将当前列定义为模板列 可以使用插槽配置项
          type: 'template',
          template: 'isOK'
        },
        {
          label: '排序',
          //这个就是将当前列定义为模板列 可以使用插槽配置项
          type: 'template',
          template: 'order'
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt'
        }
      ],
      //控制分类对话框的显示和隐藏
      showClassify: false,
      //添加分类表单的数据源
      AddCateForm: {
        cat_name: '',
        cat_pid: 0,
        cat_level: 0

      },
      //添加分类表单的验证规则对象
      AddCateFormRules: {
        cat_name: [
          {required: true, message: '请输入分类名称', trigger: 'blur'},
        ]
      },
      //父级分类的数据
      PrentList: [],
      //级联选择器里的被选择的父级分类的id组成的数组
      selectKeys: [],
      //控制编辑对话框的显示和隐藏
      SetDialogVisible: false,
      //编辑表单的数据对象
      SetForm:
          {
            cat_name: ''
          },
      //编辑表单的验证规则
      SetRules:
          {
            cateName: [
              {required: true, message: '请输入分类名称', trigger: 'blur'},
            ]
          },
      //这里是存储编辑的那一个分类的id方便后续其他方法的调用
      SetID: 0


    }
  },
  methods: {
    //这个是有成功提示的版本会在生命周期钩子里调用
    async getCateListC() {
      const {data: res} = await this.$http.get('categories', {params: this.queryInfo});
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取商品分类信息失败')
      this.cateList = res.data
      this.$message.success('获取商品分类信息成功')
      this.total = res.data.total;
      console.log(this.cateList, this.total)
    },
    async getCateList() {
      const {data: res} = await this.$http.get('categories', {params: this.queryInfo});
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取商品分类信息失败')
      this.cateList = res.data
      this.total = res.data.total;
      console.log(this.cateList, this.total)
    },
    //当分页区域的每页展示的信息条数发生变化时触发该函数
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getCateList();
    },
    //当分页区域的页数发生变化时触发该函数
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      console.log(this.pagenum)
      this.getCateList();
    },
    //点击添加分类按钮的回调函数
    AddClassify() {
      this.getParent();
      this.showClassify = true

    },
    //获取父级分类的数据列表
    async getParent() {
      const {data: res} = await this.$http.get('categories', {params: {type: 2}})
      if (res.meta.status !== 200) return this.$message.error('获取父级列表数据失败');
      this.PrentList = res.data
      console.log(this.PrentList)
    },
    //级联选择器里是选择项发生变化就会触发该函数
    parentCate() {
      console.log(this.selectKeys)
      if (this.selectKeys.length > 0) {
        this.AddCateForm.cat_pid = this.selectKeys[this.selectKeys.length - 1];
        this.AddCateForm.cat_level = this.selectKeys.length;
        return
      } else {
        this.AddCateForm.cat_pid = 0;
        this.AddCateForm.cat_level = 0;

      }

    },
    //点击分类添加对话框里的确定按钮
    async sendClassify() {
      const {data: res} = await this.$http.post('categories', this.AddCateForm);
      console.log(res)
      if (res.meta.status !== 201) return this.$message.error('分类添加失败')
      await this.getCateList();
      this.showClassify = false
      this.$message.success('分类添加成功')
    },
    UnSendClassify() {
      this.showClassify = false
    },
    //分类添加对话框关闭时触发的回调函数
    onDown() {
      //这个是官方提供的重置表单的api   会更加完善一点  所以就用官方的
      this.$refs.AddCateForm.resetFields();
      this.selectKeys = [];
      this.AddCateForm.cat_level = 0;
      this.AddCateForm.cat_pid = 0;
    },
    //点击编辑按钮触发的回调
    onSet(id) {
      this.SetDialogVisible = true
      this.SetID = id
      console.log(id)
    },
    //表单关闭时触发的回调
    onSetClose() {
      this.$refs.SetForm.resetFields();
    },
    //点击确定按钮的回调
    async SetDown() {
      const {data: res} = await this.$http.put(`categories/${this.SetID}`, {cat_name: this.SetForm.cat_name});
      if (res.meta.status !== 200) return this.$message.error('更新分类名称失败')
      this.$message.success('更新分类名称成功')
      await this.getCateList();
      this.SetDialogVisible = false
    },
    //点击删除按钮回调
    async onDelete() {


      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {data: res} = await this.$http.delete(`categories/${this.SetID}`);
        if (res.meta.status !== 200) return this.$message.error('删除分类失败');
        await this.getCateList();
        console.log(res)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }
  },
  created() {
    this.getCateListC()
  }
}
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px !important;
}
</style>
